import React from 'react'
import {axiosGet} from '../../axios'
import {url,personalizednewsong} from '../../api'
import {Table } from 'antd'

export default class NewSongList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            newSongList:''
        }
    }
    componentDidMount(){
        this.getNewSongList()
    }
    //  获取新歌排行榜
    getNewSongList(){
        axiosGet(url,personalizednewsong,'limit=10')
        .then((data)=>{
            let datas = this.dataDeal(data.result)
            console.log(datas)
            this.setState({
                newSongList:datas
            })
        })
    }
    //  处理新歌排行榜数据
    dataDeal(data){
        let arr = []
        let obj = {}
        for(let i=0;i<data.length;i++){
            obj = {}
            obj['index'] = (i+1)
            obj['key'] = i
            obj['name'] = data[i].name
            obj['picUrl'] = data[i].picUrl
            obj['artists'] = data[i].song.artists[0].name
            obj['album'] = data[i].song.album.name
            obj['company'] = data[i].song.album.company
            arr.push(obj)
        }
        return arr
    }
    //  渲染
    render(){
          const columns = [
            {
              title: ' ',
              dataIndex: 'index',
              key: 'index',
            },
            {
              title: ' ',
              dataIndex: 'picUrl',
              key: 'picUrl',
              render:(text,record,index)=>{return(<img src={text} alt=""></img>)}
            },
            {
              title: '音乐标题',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '歌手',
              dataIndex: 'artists',
              key: 'artists',
            },
            {
              title: '专辑',
              dataIndex: 'album',
              key: 'album',
            },
            {
              title: '公司',
              dataIndex: 'company',
              key: 'company',
            }
          ];
        return(
            <div className='new-song-list'>
            <Table dataSource={this.state.newSongList} columns={columns} pagination={false}></Table>
        </div>
        )
    }
}

